<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: '下载列表',
			size: '800px',
			appendToBody: true
		}"
	>
		<cl-crud ref="crud" @load="onLoad" :on-refresh="onRefresh">
			<cl-data-table
				v-bind="table"
				:page.sync="search.page"
				:limit.sync="search.size"
			>
				<template #column-opt="{ scope: { row } }">
					<div class="flex flex-align-start">
						<el-button type="primary" :disabled="row.status != 2" @click="download(row)"> 下载 </el-button>
						<!-- <a :href="">下载</a> -->
					</div>
				</template>
			</cl-data-table>
		</cl-crud>
	</cl-drawer>
</template>
<script>
	export default {
		name: "cl-down-excel-list",
		data() {
			return {
				visible: true,
				search: {
					page: 1,
					size: 20
				},
				table: {
					ref: "table",
					loading: false,
					total: 0,
					data: [],
					columns: [
						{
							label: "任务名称",
							prop: "name",
							minWidth: 300,
							align: "left",
							showOverflowTooltip: true
						},
						{ label: "创建时间", prop: "created_at", width: 160 },
						{ label: "任务状态", prop: "status_name", width: 120 },
						{ label: "操作", prop: "opt", width: 80, fixed: "right" }
					]
				}
			};
		},
		methods: {
			open() {
				this.$refs.drawer.create(() => {
					this.search.page = 1;
					this.search.size = 20;
					this.refresh();
				});
			},
			onLoad({ ctx }) {
				ctx.service(this.$service.asynchronous).done();
			},
			async onRefresh(params, { next, render }) {
				this.table.loading = true;
				let query = {
					...params,
					...this.search
				};
				const res = await next(query).finally(() => {
					this.table.loading = false;
				});
				this.table.data = res.list;
				this.table.total = res.pagination.total;

				render(res.list, res.pagination);
			},
			// crud刷新
			refresh() {
				this.$refs.crud.refresh({ page: 1, ...this.search });
			},
			close() {
				this.visible = false;
			},
			download(row) {
				window.open(row.url, "__blank");
			}
		}
	};
</script>
